<!-- 公告详情 -->
<template>
	<zh-app style="background-color: #FFFFFF;font-family: '阿里巴巴普惠体'">
		<!-- 导航栏 -->
		<zh-navbar :title="data.title" color="#85a5ff" linear="right" />
		<!-- 公告主体 -->
		<zh-result v-if="data.loading" :showBtn="false" title="请稍后" subTitle="数据加载中"></zh-result>
		<zh-html v-if="data.article.articleContent" :content="data.article.articleContent" style="padding: 20rpx;" :selectable="true" />
		<zh-result v-if="!data.loading&&!data.article.articleContent" status="warning" color="amber" :showBtn="false" title="无内容" subTitle="该公告信息已下架"></zh-result>
		<zlb-footer></zlb-footer>
	</zh-app>
</template>
<script lang="ts" setup>
	import {ref,reactive} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	// ------------------接收传入参数(组件)-------------------

	// ------------------钩子函数----------------------------
	// 初始化
	onLoad((options: any) => {
		if(options.articleId){
			data.articleId=options.articleId
			getDetail();
		}
	})

	// ------------------变量区------------------------------
	// 主数据
	const data = reactive({
		articleId:null,
		article:{} as any,
		title:'公告详情',
		loading:true,
		showCount:0,
	})

	// ------------------方法区------------------------------
	// 获取详情
	const getDetail = () => {
		data.loading=true
		const params: any = {
			articleId: data.articleId
		}
		$api.common.send.post("article0002", params,30000).then((res: any) => {
			data.article = res.result||{};
			data.showCount=res.result.showCount??0
			if(data.article.articleId){
				saveRead(data.article.articleId);
			}
			data.loading=false
		}).catch(()=>{
			data.loading=false
		})
	}
	const saveRead=(articleId :number)=>{
		//记录阅读
		setTimeout(() => {
			const params: any = {
				articleId: articleId
			}
			$api.common.send.post("article0013", params).then((res: any) => {
				data.showCount=data.showCount+1
			}).catch(()=>{
				
			})
		}, 100);
	}
	
</script>
<style scoped>
	.box {
		width: 750rpx;
		height: 125rpx;
		padding-top: 20rpx;
	}

	.box-item {
		width: 94%;
		height: 50rpx;
	}

	.info {
		height: 50rpx;
		color: #909399;
		font-size: 26rpx;
		line-height: 50rpx;
	}

	.comment {
		width: 750rpx;
		height: 80rpx;
		margin-top: 40rpx;
		position: relative;
	}

	.comment-text {
		width: 60%;
		height: 100%;
		margin-right: 40rpx;
		position: absolute;
		left: 40rpx;
	}

	.comment-icon {
		width: 28%;
		height: 100%;
		position: absolute;
		right: 40rpx;
	}

	.icon-item {
		width: 25%;
		height: 100%;
		margin-top: 16rpx;
	}

	.explain {
		width: 750rpx;
		margin: 40rpx 0 120rpx 0;
		background-color: #FFFFFF;
	}

	.explain p {
		text-align: center;
		color: #909399;
		font-size: 12rpx;
		margin: 10rpx;
	}
	.btn {
		width: 700rpx;
		position: fixed;
		bottom: 0rpx;
	}
</style>
